<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    margin-bottom: 2px;
  }
  .title-size {
    font-weight: bold;
    font-size: 1rem;
  }
  .f_left {
    border-bottom: 1px solid#e8eaec;
    border-left: 1px solid#e8eaec;
    border-right: 0px solid#e8eaec;
  }
  .f_right {
    border-bottom: 1px solid#e8eaec;
    border-left: 1px solid#e8eaec;
    border-right: 1px solid#e8eaec;
  }
  .w230 {
    width: 230px;
    height: 45px;
    float: left;
    line-height: 45px;
    color: #515a6e;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
  }
  .w265 {
    width: 265px;
    height: 45px;
    float: left;
    line-height: 45px;
    color: #515a6e;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
  }
  .nw115 {
    width: 115px;
    height: 45px;
    float: left;
    line-height: 45px;
    color: #515a6e;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
  }
</style>
<template>
  <div>
    <Form label-position="right" :label-width="100" style="position: relative;" :model="formDate">
      <Row class="mb20">
        <Col span="22" offset="1" class="ivu-form-item-content">
          <Table border :columns="columns1" :data="tempData.personList3"></Table>
          <div class="w230 f_left td1" style="text-align: center">低保(边缘)/特殊供养人口</div>
          <div class="w265 f_left ti">
            <Input v-model="person_num" style="width: 90%"></Input>
          </div>
          <div class="nw115 f_left td1" style="text-align: center">家庭人均月收入</div>
          <div class="nw115 f_left ti">
            <Input v-model="formDate.personAssets" style="width: 75%"></Input>
          </div>
          <div class="nw115 f_left td1" style="text-align: center">家庭辈分</div>
          <div class="w230 f_right ti">
            <Input v-model="formDate.seniority" style="width: 90%"></Input>
          </div>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="12" class="ivu-form-item-label">
          <Button @click="save1()">人员录入情况验证</Button>
        </Col>
        <Col span="3" class="ivu-form-item-label">
          <Button @click="save()">提交家庭成员</Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
// import { itemParamByOrderList } from '@/api/eventlist'
export default {
  name: 'Form16_1',
  data () {
    return {
      list2: [],
      list1: [],
      person_num: 0,
      bwk: '0',
      paramsArr: [],
      list: [],
      sectionList: [],
      streetList: [],
      committeesList: [],
      batchList: [],
      bz_relation_list: [
        { label: '本人', value: 0 },
        { label: '之妻', value: 1 },
        { label: '之子', value: 2 },
        { label: '之女', value: 3 },
        { label: '之父', value: 4 },
        { label: '之母', value: 5 },
        { label: '之夫', value: 6 },
        { label: '儿媳', value: 7 },
        { label: '女婿', value: 8 },
        { label: '孙子', value: 9 },
        { label: '孙女', value: 10 },
        { label: '其他亲属', value: 11 },
        { label: '监护', value: 127 }
      ],
      bz_sex_list: [
        { label: '男', value: 0 },
        { label: '女', value: 1 }
      ],
      bz_marrageFlag_list: [
        { label: '未婚', value: 0 },
        { label: '已婚', value: 1 },
        { label: '离异', value: 2 },
        { label: '丧偶', value: 3 }
      ],
      // bz_isDb_list: [
      //  { label: '非低保', value: 2 }
      // ],
      columns1: [
        {
          title: '与申请人关系',
          key: 'bz_relation',
          render: (h, params) => {
            return h('Select', {
              props: {
                value: params.row.bz_relation, // 获取选择的下拉框的值
                transfer: true
              },
              on: {
                'on-change': event => {
                  this.tempData.personList3[params.index].bz_relation = event
                }

              }
            }, this.bz_relation_list.map((item) => { // this.productTypeList下拉框里的data
              return h('Option', { // 下拉框的值
                props: {
                  value: item.value
                }
              }, item.label)
            }))
          }
        },
        {
          title: '姓名',
          key: 'bz_name',
          render: (h, params) => {
            let temp = []
            temp.push(h('Input', {
              props: {
                value: params.row.bz_name,
                autosize: true
              },
              on: {
                'on-blur': (event) => {
                  this.tempData.personList3[params.index].bz_name = event.target.value
                }
              }
            }))
            return h('div', temp)
          }
        },
        {
          title: '性别',
          key: 'bz_sex',
          render: (h, params) => {
            return h('Select', {
              props: {
                value: params.row.bz_sex, // 获取选择的下拉框的值
                transfer: true
              },
              on: {
                'on-change': event => {
                  this.tempData.personList3[params.index].bz_sex = event
                  console.log(this.tempData.personList3[params.index].bz_sex)
                }

              }
            }, this.bz_sex_list.map((item) => { // this.productTypeList下拉框里的data
              return h('Option', { // 下拉框的值
                props: {
                  value: item.value
                }
              }, item.label)
            }))
          }
        },
        {
          title: '婚姻状况',
          key: 'bz_marrageFlag',
          render: (h, params) => {
            return h('Select', {
              props: {
                value: params.row.bz_marrageFlag, // 获取选择的下拉框的值
                transfer: true
              },
              on: {
                'on-change': event => {
                  this.tempData.personList3[params.index].bz_marrageFlag = event
                }

              }
            }, this.bz_marrageFlag_list.map((item) => { // this.productTypeList下拉框里的data
              return h('Option', { // 下拉框的值
                props: {
                  value: item.value
                }
              }, item.label)
            }))
          }
        },
        {
          title: '工作单位',
          key: 'bz_companyName',
          render: (h, params) => {
            let temp = []
            temp.push(h('Input', {
              props: {
                value: params.row.bz_companyName,
                autosize: true
              },
              on: {
                'on-blur': (event) => {
                  this.tempData.personList3[params.index].bz_companyName = event.target.value
                }
              }
            }))
            return h('div', temp)
          }
        },
        {
          title: '户籍地址',
          key: 'bz_address',
          render: (h, params) => {
            let temp = []
            temp.push(h('Input', {
              props: {
                value: params.row.bz_address,
                autosize: true
              },
              on: {
                'on-blur': (event) => {
                  this.tempData.personList3[params.index].bz_address = event.target.value
                }
              }
            }))
            return h('div', temp)
          }
        },
        {
          title: '身份证号',
          key: 'bz_idcard',
          render: (h, params) => {
            let temp = []
            temp.push(h('Input', {
              props: {
                value: params.row.bz_idcard,
                autosize: true
              },
              on: {
                'on-blur': (event) => {
                  this.tempData.personList3[params.index].bz_idcard = event.target.value
                }
              }
            }))
            return h('div', temp)
          }
        },
        {
          title: '出生年月',
          key: 'bz_birthday',
          render: (h, params) => {
            let temp = []
            temp.push(h('Input', {
              props: {
                value: params.row.bz_birthday,
                autosize: true
              },
              on: {
                'on-blur': (event) => {
                  this.tempData.personList3[params.index].bz_birthday = event.target.value
                  /*   console.log(this.tempData.personList[params.index].bz_birthday) */
                }
              }
            }))
            return h('div', temp)
          }
        },
        {
          title: '低保情况',
          key: 'bz_isDb',
          render: (h, params) => {
            return h('Select', {
              props: {
                value: params.row.bz_isDb, // 获取选择的下拉框的值
                transfer: true
              },
              on: {
                'on-change': event => {
                  this.person_num = 0
                  this.list1 = []
                  this.tempData.personList3[params.index].bz_isDb = event
                  // console.log(event)
                  // if (event !== '2') {
                  //   if (event !== '') {
                  //     this.person_num++
                  //   }
                  // }
                  this.tempData.personList3.filter(item => {
                    if (item.bz_isDb === 0 || item.bz_isDb === 1 || item.bz_isDb === 3) {
                      this.list1.push(item)
                      // console.log(this.list1)
                    }
                  })
                  this.person_num = this.list1.length
                  // console.log(this.person_num)
                  this.formDate.dbNumber = this.person_num
                },
                'on-open-change': event => {
                  console.log('~~~~~~~！！！')
                  // this.bz_isDb_list = [{ label: '非低保', value: 2 }]
                  // if (this.isdbnum === 0) {
                  //  this.bz_isDb_list.push({ label: '低保', value: 0 })
                  // }
                  // if (this.isdbnum === 1) {
                  //  this.bz_isDb_list.push({ label: '边缘', value: 1 })
                  // }
                  // if (this.isdbnum === 3) {
                  //  this.bz_isDb_list.push({ label: '特殊供养', value: 3 })
                  // }
                }
              }
            }, this.bz_isDb_list.map((item) => { // this.productTypeList下拉框里的data
              return h('Option', { // 下拉框的值
                props: {
                  value: item.value
                }
              }, item.label)
            }))
          }
        }
      ]
    }
  },
  props: {
    formDate: Object,
    tempData: Object,
    ruleData: Object,
    isdbnum: Number,
    bz_isDb_list: Array
  },
  mounted () {
    if (this.formDate.dbNumber) {
      this.person_num = this.formDate.dbNumber
    }
  },
  watch: {
  },
  methods: {
    save1 () {
      this.list2 = []
      this.tempData.personList3.filter(item => {
        if (item.bz_name !== undefined && item.bz_name !== '') {
          this.list2.push(item)
        }
      })
      // console.log(this.list2)
      for (let i = 0; i < this.list2.length; i++) {
        if (this.list2[i].bz_sex === undefined || this.list2[i].bz_sex === '') {
          this.$Notice.error({ title: '请选择性别', desc: '' })
          return false
        }
        if (this.list2[i].bz_marrageFlag === undefined || this.list2[i].bz_marrageFlag === '') {
          this.$Notice.error({ title: '请选择婚姻状况', desc: '' })
          return false
        }
        if (this.list2[i].bz_relation === undefined || this.list2[i].bz_relation === '') {
          this.$Notice.error({ title: '请选择申请人关系', desc: '' })
          return false
        }
        if (this.list2[i].bz_address === undefined || this.list2[i].bz_address === '') {
          this.$Notice.error({ title: '请填写户籍地址', desc: '' })
          return false
        }
        if (this.list2[i].bz_companyName === undefined || this.list2[i].bz_companyName === '') {
          this.$Notice.error({ title: '请填写工作单位', desc: '' })
          return false
        }
        if (this.list2[i].bz_birthday === undefined || this.list2[i].bz_birthday === '') {
          this.$Notice.error({ title: '请填写生日', desc: '' })
          return false
        }
        if (this.list2[i].bz_isDb === undefined || this.list2[i].bz_isDb === '') {
          this.$Notice.error({ title: '请选择是否是低保', desc: '' })
          return false
        }
        if (this.list2[i].bz_idcard === undefined || this.list2[i].bz_idcard === '') {
          this.$Notice.error({ title: '请填写身份证号', desc: '' })
          return false
        }
      }
      /*  if (this.formDate.seniority === undefined || this.formDate.seniority === '') {
        this.$Notice.error({ title: '请填写家庭辈分', desc: '' })
        return false
      } */
      if (!this.formDate.personAssets) {
        this.$Notice.error({ title: '请填写家庭人均月收入', desc: '' })
        return false
      }
      /*  this.$Notice.error({ title: '恭喜验证成功请提交家庭成员', desc: '' }) */
      this.$Message.success('恭喜验证成功请提交家庭成员')
    },
    save () {
      // this.save1()
      this.list2 = []
      this.tempData.personList3.filter(item => {
        if (item.bz_name !== undefined && item.bz_name !== '') {
          this.list2.push(item)
        }
      })
      console.log(this.list2)
      for (let i = 0; i < this.list2.length; i++) {
        if (this.list2[i].bz_sex === undefined || this.list2[i].bz_sex === '') {
          this.$Notice.error({ title: '请选择性别', desc: '' })
          return false
        }
        if (this.list2[i].bz_marrageFlag === undefined || this.list2[i].bz_marrageFlag === '') {
          this.$Notice.error({ title: '请选择婚姻状况', desc: '' })
          return false
        }
        if (this.list2[i].bz_relation === undefined || this.list2[i].bz_relation === '') {
          this.$Notice.error({ title: '请选择申请人关系', desc: '' })
          return false
        }
        if (this.list2[i].bz_address === undefined || this.list2[i].bz_address === '') {
          this.$Notice.error({ title: '请填写户籍地址', desc: '' })
          return false
        }
        if (this.list2[i].bz_companyName === undefined || this.list2[i].bz_companyName === '') {
          this.$Notice.error({ title: '请填写工作单位', desc: '' })
          return false
        }
        if (this.list2[i].bz_birthday === undefined || this.list2[i].bz_birthday === '') {
          this.$Notice.error({ title: '请填写生日', desc: '' })
          return false
        }
        if (this.list2[i].bz_isDb === undefined || this.list2[i].bz_isDb === '') {
          this.$Notice.error({ title: '请选择是否是低保', desc: '' })
          return false
        }
        if (this.list2[i].bz_idcard === undefined || this.list2[i].bz_idcard === '') {
          this.$Notice.error({ title: '请填写身份证号', desc: '' })
          return false
        }
      }
      /*  if (this.formDate.seniority === undefined || this.formDate.seniority === '') {
        this.$Notice.error({ title: '请填写家庭辈分', desc: '' })
        return false
      } */
      if (!this.formDate.personAssets) {
        this.$Notice.error({ title: '请填写家庭人均月收入', desc: '' })
        return false
      }
      this.formDate.personList = this.list2
      console.log(this.formDate)
      /* console.log(this.tempData.personList) */
      this.$emit('ee')
    }
  }
}
</script>
